<template>
  <div id="app">
    <!-- 放子组件内容的白盒子 -->
    <div class="radioContainer">
      <h3 class="title">请选择您的兴趣爱好</h3>
      <!-- 选项是否禁用 -->
      <button class="disabledBtn" @click="handleDisabled">{{ disabledText }}</button>
      <!-- 切换呈现方式的按钮 -->
      <button class="toggleBtn" @click="handleToggle">{{ showText }}</button>
      <!-- 调用子组件 -->
      <radio-button :data="data" :direction="direction" :disabled="disabled" @change="change($event)"></radio-button>
    </div>
    <!-- 选择结果的显示 -->
    <p class="result">
      您当前选择的是：{{ chooseRet }}
    </p>
  </div>
</template>

<script>
import RadioButton from './components/RadioButton.vue';
export default {
  components: { RadioButton },
  name: 'App',
  data() {
    return {
      // 自定义单选项列表数据
      data: [
        {
          label: '篮球',
          value: 1
        },
        {
          label: '羽毛球',
          value: 2
        },
        {
          label: '乒乓球',
          value: 3
        },
        {
          label: '瑜伽',
          value: 4
        },
        {
          label: '烹饪',
          value: 5
        },
        {
          label: '唱歌',
          value: 6
        }
      ],
      // 存储接受到的选择结果
      chooseRet: '',
      // 'horizontal'|'vertical'，默认值horizontal，水平呈现或者垂直呈现
      direction: 'horizontal',
      // 单选项列表是否禁用
      disabled: false
    };
  },
  methods: {
    handleToggle() {
      if (this.direction === 'horizontal') {
        this.direction = 'vertical';
      } else {
        this.direction = 'horizontal';
      }
    },
    handleDisabled() {
      this.disabled = !this.disabled;
    },
    change(item) {
      // 将子组件中选择了哪一项传递给父组件
      this.chooseRet = item.label;
    }
  },
  computed: {
    showText() {
      if (this.direction === 'horizontal') {
        return '垂直呈现';
      } else {
        return '水平呈现';
      }
    },
    disabledText() {
      if (this.disabled) {
        return '解除禁用';
      } else {
        return '选项禁用';
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.radioContainer {
  position: relative;
  background-color: #fff;
  width: 400px;
  height: 400px;
  border: 1px solid #eee;
  border-radius: 15px;
  box-shadow: 5px 5px 5px #eee;
  margin: auto;
  margin-top: 80px;
  overflow: auto;
}
.title {
  margin-left: 20px;
}
.result {
  text-align: center;
  color: #fff;
  font-size: 20px;
}
.toggleBtn {
  position: absolute;
  left: 75%;
  top: 4%;
  background: #eee;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  padding: 6px;
}
.disabledBtn {
  position: absolute;
  left: 55%;
  top: 4%;
  background: #eee;
  border: none;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  padding: 6px;
}
</style>
